<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content=" ">
  <meta name="author" content=" ">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Foodtruck - Tacos : Shortcodes Elements</title>

  <link rel="stylesheet" type="text/css" href="./assets/js/customscroll/jquery.mCustomScrollbar.css">
  <link rel="stylesheet" type="text/css" href="./assets/js/flexslider/css/flexslider.css">
  <link rel="stylesheet" type="text/css" href="./assets/js/prettyPhoto/css/prettyPhoto.css">
  <link rel="stylesheet" type="text/css" href="./assets/js/bxslider/jquery.bxslider.css">
  <link rel="stylesheet" type="text/css" href="./assets/css/font-awesome.css">

  <link rel="stylesheet" type="text/css" href="./assets/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="./assets/css/style.css">
  <link rel="stylesheet" type="text/css" href="./assets/flavours/tacos/css/tacos.css">

  <!-- modernizr : detect css transition -->
  <script src="./assets/js/modernizr.custom.81779.js"></script>
  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="./assets/bootstrap/js/html5shiv.js"></script>
  <script src="./assets/bootstrap/js/respond.min.js"></script>
  <![endif]-->


</head>
<body>



<nav class="navbar navbar-default" role="navigation">
  <div class="inner">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle btn btn-primary" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <div class="text-center">
          <p class="address">
            Tacos Locos - Atlantic Avenue 1234, New York, +66 87 65 43 21
          </p>
        </div>

        <a class="small-brand" href="/"  data-width="221" data-top="58"><img src="./assets/flavours/tacos/images/content/logo-small.png" alt=" " ></a>

        <a href="tel:66-87-65-43-21" class="phoneIcon" style="display:none">+66 87 65 43 21</a>
        <a href="http://goo.gl/maps/IUzKJ" class="locationIcon" target="_blank" style="display:none;">http://goo.gl/maps/IUzKJ</a>
        <ul class="smallSocials">
          <li class="fb"><a href="#"><img src="./assets/images/smallsocial-fb.png" alt="Facebook"></a></li>
          <li class="tw"><a href="#"><img src="./assets/images/smallsocial-tw.png" alt="Twitter"></a></li>
          <li class="gg"><a href="#"><img src="./assets/images/smallsocial-gg.png" alt="Google+"></a></li>
          <li class="rss"><a href="#"><img src="./assets/images/smallsocial-rss.png" alt="RSS"></a></li>
        </ul>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav text-center" data-type="margin-top" data-pos="138">
          <li><a href="index.html">Home</a></li>
          <li><a href="8_menucard.html">Menu card</a></li>
          <li><a href="9_events.html">Events</a></li>
          <li><a href="10_story.html">Story</a></li>
          <li><a href="11_gallery.html">Gallery</a></li>
          <li class="dropdown active">
            <a href="1_shortcodes_boxes.html" class="dropdown-toggle">Shortcodes</a>
            <ul class="dropdown-menu">
              <li><a href="1_shortcodes_boxes.html">Boxes</a></li>
              <li><a href="2_shortcodes_toggleable.html">Toggleable</a></li>
              <li><a href="3_shortcodes_contact.html">Contact</a></li>
              <li><a href="4_buttons_typography.html">Typography</a></li>
              <li><a href="5_shortcodes_elements.html">Elements</a></li>
              <li><a href="6_images_sliders.html">Sliders</a></li>
            </ul>
          </li>

          <li><a href="7_blog.html">Blog</a></li>
          <li><a href="12_contact.html">Contact</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- / container -->

    <div class="btm"></div>
  </div>

</nav>



<div class="bg-1 section">
  <div class="inner" data-topspace="80" data-bottomspace="100">
    <div class="container">

      <h3 class="hdr4">Bars</h3>

      <div class="row">
        <div class="col-md-12">

          <h5>MOST SOLD FOOD IN NOVEMBER</h5>

          <p>
            Pellentesque habitant morbi tristique senectu ac turpis egestas.
          </p>

          <div class="progress">
            <div class="progress-bar" role="progressbar" data-percentage="100" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" >
              <span class="pull-left">Burger</span>
              <span class="pull-right" style="display:none;">2500 <sub>/ month</sub></span>
            </div>
          </div>
          <div class="progress">
            <div class="progress-bar" role="progressbar" data-percentage="75" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" >
              <span class="pull-left">Hot Dogs</span>
              <span class="pull-right" style="display:none;">1850 <sub>/ month</sub></span>
            </div>
          </div>
          <div class="progress">
            <div class="progress-bar" role="progressbar" data-percentage="65" aria-valuenow="65"  aria-valuemin="0" aria-valuemax="100" >
              <span class="pull-left">Tacos</span>
              <span class="pull-right" style="display:none;">1370 <sub>/ month</sub></span>
            </div>
          </div>
          <div class="progress">
            <div class="progress-bar" role="progressbar" data-percentage="50" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" >
              <span class="pull-left">Burritos</span>
              <span class="pull-right" style="display:none;">900 <sub>/ month</sub></span>
            </div>
          </div>

        </div>
      </div>
      <!-- / row -->


      <br>
      <hr class="line-separator">
      <br>

      <h3 class="hdr4">Circle Graphs</h3>

      <h5>Information</h5>
      <p>
        Pellentesque habitant morbi tristique senectu  ac turpis egestas.
      </p>
      <br>

      <div class="demoContent">
        <div class="row">
          <div class="col-md-4">
            <div class="text-left">
              <div class="pie-chart" data-percent="90" data-color="#3b6b1a"><span>90<sub>%</sub></span></div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="text-center">
              <div class="pie-chart" data-percent="25" data-color="#3b6b1a"><span>25<sub>%</sub></span></div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="text-right">
              <div class="pie-chart" data-percent="35" data-color="#3b6b1a"><span><i class="fa fa-gift"></i></span></div>
            </div>
          </div>
        </div>
      </div>



      <br>
      <hr class="line-separator">
      <br>

      <h3 class="hdr4">Testimonials</h3>

      <div class="row">
        <div class="col-md-5">

          <h5>LIGHT</h5>
          <p>
            Pellentesque habitant morbi tristique senectu ac turpis.
          </p>
          <br>

          <div class="testimonial">
            <div class="inner">
              <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam.
              </p>
            </div>
            <div class="media">
              <a class="pull-left" href="#">
                <img class="media-object" src="./assets/flavours/tacos/images/content/testimonial-1.jpg" alt=" ">
              </a>
              <div class="media-body">
                Maria Jessica Turner<br>
                ABC Company
              </div>
            </div>
          </div>
          <!-- / testimonial -->
        </div>
        <div class="col-md-2"></div>
        <div class="col-md-5">
          <h5>DARK</h5>
          <p>
            Pellentesque habitant morbi tristique senectu ac turpis.
          </p>
          <br>

          <div class="testimonial dark_ver">
            <div class="inner">
              <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam.
              </p>
            </div>
            <div class="media">
              <a class="pull-left" href="#">
                <img class="media-object" src="./assets/flavours/tacos/images/content/testimonial-1.jpg" alt=" ">
              </a>
              <div class="media-body">
                Maria Jessica Turner<br>
                ABC Company
              </div>
            </div>
          </div>
          <!-- / testimonial -->
        </div>
      </div>
      <!-- / row -->



    </div>
  </div>
</div>
<!-- / bg-1 -->



<footer>
  <div class="container">

    <div class="row">
      <div class="col-md-3">

        <h4>Contact</h4>

        <p>
          Atlantic Avenue 1234,<br><br>
          New York, NY<br><br>
          123 - 456 - 7891<br><br>
          <a href="mailto:hello@tacoslocos.com">hello@tacoslocos.com</a>
        </p>
        <hr>
        <h4>Hours</h4>

        <p>
          Monday - Friday<br>
          11:00 am - 11:00 pm
          <br><br>
          Saturday & Sunday<br>
          10:45 am - 5:00 pm
          <br><br>
          Saturday & Sunday<br>
          10:45 am - 5:00 pm
        </p>

      </div>
      <div class="col-md-6">
        <img src="./assets/flavours/tacos/images/content/logo.png" alt=" ">

        <div class="googleMap" data-location="Marine Ave. New York, NY" data-text="We are here!"></div>

        <ul class="bigSocials">
          <li class="fb"><a href="#"><img src="./assets/images/social-fb.png" alt="Facebook"></a></li>
          <li class="tw"><a href="#"><img src="./assets/images/social-tw.png" alt="Twitter"></a></li>
          <li class="gg"><a href="#"><img src="./assets/images/social-gg.png" alt="Google+"></a></li>
          <li class="rss"><a href="#"><img src="./assets/images/social-rss.png" alt="RSS"></a></li>
        </ul>

        <p class="copyright">© Copyright 2014 <a href="#">TemplateRockers</a></p>


      </div>
      <div class="col-md-3">
        <h4>Latest Tweets</h4>

        <div class="tweets">
          <div style="display:none">here will be displayed live tweets, configuration is placed in /twitter/config.php</div>
        </div>
      </div>
    </div>

  </div>
  <a href="#" id="toTop"></a>
</footer>
<!-- / footer -->




<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/bootstrap/js/bootstrap.min.js"></script>

<!-- we're including library : maps.googleapis.com/maps/api/js?sensor=false in main.js -->
<script src="./assets/js/gmap3.min.js"></script>

<script src="./assets/js/customscroll/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="./assets/js/flexslider/jquery.easing.1.3.min.js"></script>
<script src="./assets/js/flexslider/jquery.flexslider-min.js"></script>
<script src="./assets/js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script src="./assets/js/bxslider/jquery.bxslider.min.js"></script>
<script src="./assets/twitter/js/jquery.tweet.js"></script>
<script src="./assets/js/jquery.hoverdir.js"></script><script src="./assets/js/jquery.arctext.js"></script>
<script src="./assets/js/jquery.placeholder.js"></script>
<script src="./assets/js/jquery.sticky.js"></script>

<script src="./assets/js/jquery.appear.js"></script>
<script src="./assets/js/jquery.easypiechart.min.js"></script>

<script src="./assets/form/js/form.js"></script>
<script src="./assets/js/main.js"></script>

<script src="./assets/js/less.min.js"></script>



</body>

</html>